<template>
  <div class="bg-c-fff min-height mb70">
    <p class="bread">
      <a href="javascript:void(0);" class="font-s-16">法律服务监控员-闹钟设置记录</a>
    </p>
    <div class="content">
      <table width="100%" class="auto">
        <tr>
          <th>设置时间</th>
          <th>订单编号</th>
          <th>闹钟时间</th>
          <th>提醒事件</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in list">
          <td>{{item.createTime}}</td>
          <td>{{item.relationId}}</td>
          <td>{{item.time}}</td>
          <td>{{item.content}}</td>
          <td>
            <button class="blue-button small-btn-css" @click="onAlarmDetails(item)">查看详情</button>
          </td>
        </tr>
      </table>
      <div class="foot-box">
        <pagination :index="pageIndex" :total="pageTotal" v-show="this.list!=0" @pagechange="onPageChange"></pagination>
      </div>
    </div>
    <vodal :show="alarmDetailsShow" animation="zoom" :width="380" :height="350" @hide="alarmDetailsShow=false">
      <div class="vodal-main clock">
        <h4>设置提醒闹钟</h4>
        <ul>
          <li>
            <div class="title dib">闹钟时间：</div>
            <input type="text" v-model="time" name="">
          </li>
          <li>
            <h5>提醒内容：</h5>
            <div class="box">
              <p> <span>提醒事件：</span>
                <input type="text" v-model="content" name="">
              </p>
              <p><span>备注：</span>
                <textarea class="vt" v-model="remark"></textarea>
              </p>
            </div>
          </li>
          <li>
            <h5>多方提醒：</h5>
            <div class="box">
              <div class="dib" v-for="item in memberList">
                {{item}}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import Pagination from '../components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      alarmDetailsShow: false,
      pageIndex: 1,
      pageTotal: 0,
      list: [],
      time: '',
      content: '',
      remark: '',
      memberList: []
    }
  },
  mounted() {
    this.onPageChange(1)
  },
  methods: {
    onPageChange(n) {
      this.getData(n)
    },
    getData(n) {
      this.$http.post('/sysClock/read/list', {
        page: n,
        rows: 10
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.pageIndex = n
          this.pageTotal = Math.ceil(data.data.total / 10)
          this.list = data.data.rows
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onAlarmDetails(item) {
      this.time = item.time
      this.content = item.content
      this.remark = item.remark
      this.memberList = item.relationNames.split(',')
      this.alarmDetailsShow = true
    }
  }
}

</script>
<style type="text/css" scoped>
.min-height {
  height: 949px;
}

.bread {
  padding-left: 20px;
  border-bottom: 1px solid #ddd;
}

.bread a {
  line-height: 45px;
}

.content {
  padding: 20px 30px 0 30px;
}

.foot-box {
  padding: 35px 0px 0px 0px;
}

.clock h5,
.title {
  padding-left: 30px;
  line-height: 25px;
  font-weight: bolder;
  margin-top: 10px;
  font-size: 14px;
}

.clock .box {
  padding: 0px 45px;
}

.clock .box p {
  margin-bottom: 15px;
}

.clock .box select {
  border: 1px solid #ddd;
  height: 35px;
  width: 150px;
  color: #2f2f2f;
}

.clock .box span {
  display: inline-block;
  width: 70px;
  text-align: right;
}

.clock .box .time {
  width: 40px;
  height: 40px;
}

.clock .box textarea {
  width: 215px;
  height: 80px;
  padding: 8px;
}

.clock .box .dib {
  margin-right: 15px;
  margin-bottom: 8px;
}

.clock button {
  margin: 20px 10px 0 10px;
}

</style>
